<template>
  <div class="mobile">
    <!-- 横屏！！！------------------------------------------------- -->
    <div class="m-box2" v-if="boxshow">
      <!-- 标题 -->
      <div class="m-title2">
        <img src="../public/hustlogo.png" class="mobilepic">
        <h1>襄北大桥转体-三维可视化监测系统</h1>

        <div class="elbox">

          <el-popover
            placement="top-start"
            title="华中科大减隔震中心"
            width="150"
            trigger="click"
          >
            <img  style="width:150px" src="../public/二维码.jpg" alt="">
            <el-button class="erweima" size="mini"  type="text" slot="reference">
              公众号
            </el-button>
          </el-popover>

          <el-button  size="mini" type="text" @click="fullScreenLoad()" style="pointer-events:auto">
            <i
              :class="isFullScreen ? 'el-icon-crop' : 'el-icon-full-screen'"
              class="backPage"
              >{{ isFullScreen ? "退出" : "全屏" }}</i
            >
          </el-button>

        </div>

      </div>
      <div class="m-databox">
        <!-- 左边区域---------------- -->
        <transition enter-active-class="animate__animated animate__fadeInUp">
          <div class="box" v-show="show">
            <!-- 左1倾角 -->
            <div class="m-dipangle" >
              <div class="tabs" id="m-dipangle">
                <a
                  href="javascript:;"
                  @click="dipanglechange(0)"
                  :class="{ active: dipanglenum == 1 }"
                >
                  ●x倾角</a
                >
                <i class="el-icon-turn-off" v-if="dipangleshow"></i>
                <i class="el-icon-open" v-else></i>
                <a
                  href="javascript:;"
                  @click="dipanglechange(1)"
                  :class="{ active: dipanglenum == 0 }"
                >
                  y倾角</a
                >
              </div>
              <div class="content" v-if="dipanglenum == 0">
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(°)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in dipanglex"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content" v-else>
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(°)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in dipangley"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 左2支腿反力 -->
            <div class="m-deflection">
              <div class="tabs">
                <a href="javascript:;">●反力变化</a>
              </div>
              <div class="content">
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(kN)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in average"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
        <!-- 中间区域 ------------------>
        <div class="box box_middle" id="midbox">
          <!-- 模型视窗 -->
          <div class="window"></div>
          <!-- 实时数据 -->
          <div class="timedata">
            <div class="m-name">
              <!-- <i class="el-icon-time"></i> 转体实时重点数据 -->
            </div>
            <div class="m-flexbox">
              <!-- 几个并排的元素 -->
              <div class="m-flexson">
                <div class="m-noblockbox">
                  <img
                    src="http://cdn.hustzjc.top/转速表,仪表盘,测速,速度.svg"
                    class="m-pic1"
                    style="margin-left: 1vw"
                  />
                  <span
                    >转动速率：
                    <i style="font-size: 4vh; color: #00f2f1">{{
                      speedrate
                    }}</i>
                    °/min</span
                  >
                </div>
              </div>
              <div class="m-flexson">
                <div class="m-blockbox">
                  <img
                    src="http://cdn.hustzjc.top/视角旋转对齐.svg"
                    class="m-pic1"
                  />
                  <span
                    >当前转角：
                    <i
                      style="
                        font-size: 4.5vh;
                        color: white;
                        text-decoration: underline;
                        font-weight: bold;
                      "
                      >{{ cornor }}</i
                    >
                    /84度</span
                  >
                </div>
              </div>
              <div class="m-flexson">
                <div class="m-noblockbox">
                  <img
                    src="http://cdn.hustzjc.top/距离测量.svg"
                    class="m-pic1"
                  />
                  <span
                    >偏轴距离：
                    <i style="font-size: 4vh; color: #00f2f1">{{
                      displacement
                    }}</i>
                    mm</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边区域 -->
        <transition enter-active-class="animate__animated animate__fadeInUp">
          <div class="box" v-show="show">
            <!-- 右1应力 -->
            <div class="m-stress">
              <div class="tabs" id="m-stress">
                <a
                  href="javascript:;"
                  @click="strainchange(0)"
                  :class="{ active: strainnum == 1 }"
                >
                  ●砼段</a
                >
                <i class="el-icon-turn-off" v-if="strainshow"></i>
                <i class="el-icon-open" v-else></i>
                <a
                  href="javascript:;"
                  @click="strainchange(1)"
                  :class="{ active: strainnum == 0 }"
                >
                  钢梁段</a
                >
              </div>
              <div class="content" v-if="strainnum == 0">
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(uε)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in stress1"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content" v-else>
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(MPa)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in stress2"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 右2加速度挠度 -->
            <div class="m-speed">
              <div class="tabs" id="m-speed">
                <a
                  href="javascript:;"
                  @click="speedchange(0)"
                  :class="{ active: speednum == 1 }"
                >
                  ●加速度</a
                >
                <i class="el-icon-turn-off" v-if="speedshow"></i>
                <i class="el-icon-open" v-else></i>
                <a
                  href="javascript:;"
                  @click="speedchange(1)"
                  :class="{ active: speednum == 0 }"
                >
                  挠度</a
                >
              </div>
              <div class="content" v-if="speednum == 0">
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(g)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in speed1"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content" v-else>
                <div class="head">
                  <span class="col">所处位置</span>
                  <span class="col">传感器编号</span>
                  <span class="col">值(mm)</span>
                </div>
                <div class="marquee-view">
                  <div class="marquee">
                    <div
                      class="row"
                      v-for="(item, index) in deflection"
                      :key="index"
                    >
                      <span class="col">{{ item.place }}</span>
                      <span class="col">{{ item.sid }}</span>
                      <span class="col">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <!-- 竖屏-------------------------------------- -->
    <div class="m-box1" v-else>
      <h1 class="tip">
        微信/QQ请点击右上角选择浏览器打开
        <i class="el-icon-top-right"></i>
      </h1>
      <img
        src="http://cdn.hustzjc.top/多色-横竖屏.svg"
        class="m-pic0"
        style="display: block; width: 70vw"
      />
      <h1>为了更好的观看体验，请横屏观看</h1>
      
    </div>
    <!-- 背景大模型 -->
    <Project ref="pro" @modeload="callclose" />
  </div>
</template>

<script>
import Project from "./try/mode.vue";
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      boxshow: false,
      // 数据盒子显示
      show: true,
      // 速度切换
      speedshow: true,
      // 应力切换
      strainshow: true,
      dipangleshow:true,
      loading: "",
      loadnum: 0,
      // sudu
      speednum: 0,
      strainnum: 0,
      dipanglenum:0,
      // 全屏切换
      isFullScreen: false,
    };
  },
  // vuex数据引入
  computed: {
    ...mapState([
      // 实时数据
      "cornor",
      // 倾角
      "dipanglex",
      "dipangley",
      // 加速度
      "speed1",
      // 角速度
      "speed2",
      // 位移
      "displacement",
      // 挠度
      "deflection",
      // 速率
      "speedrate",
      // 应力
      "stress1",
      "stress2",
      // 支腿反力
      "average",
    ]),
  },
  components: {
    Project,
  },
  methods: {
    // 接口函数调用
    ...mapActions(["getBasicData", "getAllData", "getSensorValueData"]),
    // 数据处理函数
    ...mapMutations([ "getDataFromSV","testcornor"]),
    // 接口有序调用
    async stepaxios() {
      let first = await this.getBasicData();
      console.log(first);
      // let second = await this.getAllData(100);
      // console.log(second);
      let third = await this.getSensorValueData();
      // 提取最新cornor
      // this.getNewCornor();
      // 处理sensorvalue数据
      // this.getDataFromSV();
      console.log(third);
      // 关闭全屏加载
      this.callclose();
      // ceshi
      // this.testcornor()
      // 一分钟请求一次
      setInterval(() => {
        this.getSensorValueData()
        console.log('4s间隔请求数据成功');
      },4000)
    },
    getpro() {
      this.$refs.pro.test();
      // console.log("error");
    },
    // loading加载
    mloading() {
      this.loading = this.$loading({
        lock: true,
        text: "模型加载中",
        spinner: "el-icon-loading",
        customClass: "el-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    // 关闭全屏加载
    overFullScreen() {
      this.show = true;
      this.loading.close();
      console.log("加载效果已关闭");
    },
    // 子组件通信关闭全屏加载
    callclose() {
      this.loadnum++;
      var k = this.loadnum;
      if (k == 2) {
        this.loading.close();
        this.show = true;
        // k = 0;
        console.log("加载效果已关闭");
      }
      this.loadnum = k;
    },
    // 全屏切换
    fullScreenLoad() {
      if (this.isFullScreen) {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 全屏显示
        if (document.body.requestFullscreen) {
          document.body.requestFullscreen();
        } else if (document.body.mozRequestFullScreen) {
          document.body.mozRequestFullScreen();
        } else if (document.body.webkitRequestFullScreen) {
          document.body.webkitRequestFullScreen();
        } else if (document.body.msRequestFullscreen) {
          document.body.msRequestFullscreen();
        }
      }
    },
    // 横竖屏切换
    renderResize() {
      // 判断横竖屏
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width > height) {
        this.$nextTick(() => {
          this.boxshow = true;
        });
      } else {     
        this.$nextTick(() => {
          this.boxshow = false;
        });
      }
      // 注意：renderResize 方法执行时虚拟 dom 尚未渲染挂载，如果要操作 vue 实例，最好在this.$nextTick()里进行。
    },
    // 页面加载宽高变化
    // 速度切换
    speedchange(a) {
      this.speedshow = !this.speedshow;
      this.speednum = a;
    },
    strainchange(a) {
      this.strainshow = !this.strainshow;
      this.strainnum = a;
    },
    dipanglechange(a){
      this.dipangleshow = !this.dipangleshow;
      this.dipanglenum = a;
    },
    // pad字体切换
    changefontsize() {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      let k = width / height;
      if (k <= 1.5) {
        // 更改大标题
        var changeh = document.querySelectorAll("h1");
        for(let k = 0;k < changeh.length ; k++){
          changeh[k].style.setProperty("font-size", "2vw");
        }
        // 更改标题
        var changea = document.querySelectorAll("a");
        for(let i = 0;i < changea.length ; i++){
          changea[i].style.setProperty("font-size", "2vw");
        }
        // 更改图标
        var changei = document.querySelectorAll("i");
        for(let j = 1;j < changei.length ; j++){
          if( j != 6){
            changei[j].style.setProperty("font-size", "2vw");
          }
        }
        changei[0].style.setProperty("font-size", "1.5vw");
        changei[6].style.setProperty("font-size", "1.5vw");
        // 更改文字
        var changespan = document.querySelectorAll("span");
        for(let m = 0;m < changespan.length ; m++){
          changespan[m].style.setProperty("font-size", "1.5vw");
        }
        // 更改行距
        var changeline = document.querySelectorAll(".row");        
        for(let n = 0;n < changeline.length ; n++){
          changeline[n].style.setProperty("line-height", "2.5vw");
        }
        // 更改公众号变化
        // var changeerweima = document.querySelectorAll(".erweima"); 
        // changeerweima[0].style.setProperty("right", "50px");
      }
    },
  },
  created() {
    // 数据请求
    this.stepaxios();
    // 监听各浏览器fullscreenchange 事件处理
    document.addEventListener("fullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
    document.addEventListener("mozfullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
    document.addEventListener("msfullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
  },
  mounted() {
    // 开局判断横竖屏并判断字体
    this.renderResize();
    
    // 开局加载
    this.mloading();
    // 监听resize方法
    window.addEventListener("resize", this.renderResize, false);
    // 适配ipad字体
    window.addEventListener("resize", this.changefontsize, false);
    // 模型加载
    this.getpro();
    
  },
  // 数据更新阶段再判断是否ipad
  updated(){
    this.changefontsize();
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener("resize", this.renderResize, false);
  },
};
</script>

<style scoped>
@import url("./style/mobile.css");
</style>